var lunbotu = document.querySelector(".banner_content");
var uls = document.querySelector(".banner_content ul");
var lis = document.querySelectorAll(".banner_content ul li");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var points = document.querySelectorAll(".banner_content ol li");

// console.log("lunbotu=>",lunbotu);
// console.log("uls=>",uls);
// console.log("lis=>",lis);
// console.log("获取ul里面的第1个li标签=>",lis[0]);
// console.log("prev=>",prev);
// console.log("next=>",next);
// console.log("points=>",points);

var width = lis[0].offsetWidth;
console.log("轮播图片的宽度值 ==》",width);

var index = 0;

var timer = null;
// timer = setInterval(function () {
//     index++;
//     if (index > 4){
//         index = 0;
//     }
//     uls.style.left = -(index * width) + "px";
//     console.log("ul的left值==》", uls.style.left);
// },1000);
timer = setInterval(changeImg,1000);

function changeImg(){
    index++;
    if (index > 4){
        index = 0;
    }
    uls.style.left = -(index * width) + "px";
    setpoints(points,index);
}

lunbotu.addEventListener("mouseover",function(){
    clearInterval(timer);
    timer = setInterval(changeImg,1000);
})

prev.onclick = function () {
    console.log("鼠标点击左边按钮啦");
    clearInterval(timer);
    index--;
    if (index < 0){
        index = 4;
    }
    uls.style.left = -(index * width) + "px";
    setpoints(points,index);
}
next.onclick = function () {
    console.log("鼠标点击右边按钮啦");
    clearInterval(timer);
    index++;
    if (index > 4){
        index = 0;
    }
    uls.style.left = -(index * width) + "px";
    setpoints(points,index);
}
for (var i = 0;i < points.length; i++){
    points[i].count = i;
    points[i].addEventListener("click",function(){
        newCount = this.count;
        console.log("newCount==>",newCount);
        uls.style.left = -(newCount * width) + "px";
        setpoints(points,newCount);
    })
}
function setpoints(a,b){
    for (var j = 0; j < points.length; j++){
        a[j].classList.remove("active");
    }
    a[b].classList.add("active");
}